.top{ background: #fff; height: 35px; line-height: 35px; border-bottom: 1px solid #efefef; }
.top .date{ float: left; margin-left: 10px; }
.top .weather{ float: right; margin-right: 10px; }
.panel{ background: #fff; box-shadow: 0 1px 1px 0 #999; }
.content{ text-indent: 2em; padding: 10px 5px; line-height: 20px; }
.text{ margin: 10px auto; width: 90%; }
.text textarea{ width: 100%; margin: 0; padding: 5px; }
.text button{ float: right; margin-top: 5px; }

.item{ padding: 10px; display: flex; background: #fff; }
.item .avatar {  width: 15%; padding-right: 5px; }
.item .avatar img{ width: 50px; height: 50px; }
.item .info{ width: 100%; }
.item .info .intro{ width: 100%; }
.item .info .intro .pic{ width: 100%; margin-top: 10px; }
.item .info .intro .pic img{ width: 100%; }
.item .info .intro a{ text-align: justify; height: 60px; line-height: 20px; overflow: hidden; color: #666; }
.item .info .intro{ text-align: justify; overflow: hidden; color: #666; }
.item .info .about{ margin-bottom: 5px; width: 100%; display: flex; justify-content: space-between; }
.item .info .option{ display: flex; padding-top: 10px; font-size: 14px; }
.item .info .option .time{ width: 50%; display: flex; line-height: 20px; text-align: left; font-size: 13px; color: #aaa; }
.item .info .option .reply{ width: 50%; display: flex; text-indent: 5px; line-height: 20px; justify-content: flex-end; }
.item .info .option img{ width: 20px; height: 20px; }

.bottom{ box-shadow: 0 -1px 1px 0 #999; }
.comment-list{ margin-top: 10px; }
.comment{ padding: 10px; background: #fff; border-bottom: 1px solid #eee; }
.comment .about{ height: 20px; line-height: 20px; }
.comment .about .nick{ float: left; width: 50%; }
.comment .about .time{ float: right; width: 50%; text-align: right; }
.comment .rpl_content{ width: 85%; }